<!-- 
    说明： 实践项目详情
 -->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <div class="banner">
        <img
          class="banner-bg"
          src="@/assets/images/productManage/banner.png"
          alt=""
          srcset=""
        />
        <p class="banner-text">创意探索 勇敢突破</p>
      </div>
      <div class="main">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'productList' }">
              <span style="color: #3d6cb0; cursor: pointer">返回项目列表</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="base-info bottom-line" v-if="info && info.title">
          <div class="title">{{ info.title }}</div>
          <div
            v-if="info.projectDescription"
            class="description"
            v-html="info.projectDescription"
          ></div>
          <div class="other-info">
            <span class="label">举办单位</span>
            <img
              class="hold-unit-url"
              v-if="info.holdUnitUrl"
              :src="info.holdUnitUrl"
              alt="举办单位"
              srcset=""
              v-imgError
            />
            <span class="label">参赛类型</span>
            <span class="right">
              {{ entryTypeStr[info.entryType] || "--" }}
            </span>
            <span
              class="label"
              v-if="info.entryType && Number(info.entryType) !== 1"
              >团队人数限制</span
            >
            <span
              class="right"
              v-if="info.entryType && Number(info.entryType) !== 1"
            >
              {{ info.itemPeopleNum }}
            </span>
          </div>
          <ComBtn :title="statusStr" :disabled="!isReady || isJoined" @handleClick="linkToJoinProductPage" />
          <div v-if="resultInfo !== null" class="hight-light">关联结果公示 <span @click="$router.push({name: 'productResultDetail', query: {id: resultInfo.id}})">{{ resultInfo.title }}</span></div>
        </div>
        <div class="product-row-info bottom-line">
          <div class="row">
            <div class="left">赛程安排:</div>
            <diV class="right">
              <div
                class="time-row"
                v-for="(item, index) in info.scheduleVOList"
              >
                <div v-if="item.scheduleType === 1">
                  遴选时间：{{ item.startTime || "--" }} ～
                  {{ item.endTime || "--" }} 作品截止上传时间：{{
                    item.closingDate || "--"
                  }}
                </div>
                <div v-if="item.scheduleType === 2">
                  初赛时间：{{ item.startTime || "--" }} ～
                  {{ item.endTime || "--" }} 作品截止上传时间：{{
                    item.closingDate || "--"
                  }}
                </div>
                <div v-if="item.scheduleType === 3">
                  复赛时间：{{ item.startTime || "--" }} ～
                  {{ item.endTime || "--" }} 作品截止上传时间：{{
                    item.closingDate || "--"
                  }}
                </div>
                <div v-if="item.scheduleType === 4">
                  决赛时间：{{ item.startTime || "--" }} ～
                  {{ item.endTime || "--" }} 作品截止上传时间：{{
                    item.closingDate || "--"
                  }}
                </div>
              </div>
            </diV>
          </div>
          <div class="row">
            <div class="left">比赛须知:</div>
            <diV class="right">
              <div class="time-row" v-html="info.entryInformation"></div>
            </diV>
          </div>
        </div>
        <div class="product-row-info bottom-line">
          <div class="row">
            <div class="left">评选办法：</div>
            <diV class="right">
              <div class="time-row" v-html="info.reviewRules"></div>
            </diV>
          </div>
          <div class="row">
            <div class="left">参赛要求:</div>
            <diV class="right">
              <div class="time-row" v-html="info.entryRequire"></div>
            </diV>
          </div>
          <div class="row">
            <div class="left">项目奖励:</div>
            <diV class="right">
              <div class="time-row" v-html="info.projectRewards"></div>
            </diV>
          </div>
        </div>
        <div class="product-row-info">
          <div class="row" v-if="info.videoUrl">
            <div class="left">视频介绍：</div>
            <diV class="right">
              <div class="video-box">
                <vueVideoPlayer :src="info.videoUrl"></vueVideoPlayer>
              </div>
            </diV>
          </div>
          <div class="row">
            <div class="left">大赛组织:</div>
            <diV class="right">
              <div class="time-row" v-html="info.entryRequire"></div>
            </diV>
          </div>
          <div class="row" v-if="Array.isArray(info.annexVOList) && info.annexVOList.length">
            <div class="left">比赛材料:</div>
            <diV class="right">
              <div class="tips-text">{{info.annexDownTypeStr || '--' }}</div>
              <div class="table-view">
                <el-row>
                  <el-col :span="6">
                    <p class="text-col head">序号</p>
                  </el-col>
                  <el-col :span="12"> <p class="text-col head">文件</p></el-col>
                  <el-col :span="6"> <p class="text-col head">操作</p></el-col>
                </el-row>
                <el-row v-for="(item, index) in info.annexVOList" :key="index">
                  <el-col :span="6">
                    <p class="text-col">{{ index + 1 }}</p>
                  </el-col>
                  <el-col :span="12">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.annexName"
                      placement="top"
                    >
                      <p class="text-col cursor-pointer">
                        {{ item.annexName }}
                      </p>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="6">
                    <p :class="['text-col', 'href-link' , {'no-download': !canDown}]" @click="openDownLoad(item)">
                      下载
                    </p></el-col
                  >
                </el-row>
              </div>
            </diV>
          </div>
        </div>
        <div class="btn-box">
            <ComBtn :title="statusStr" :disabled="!isReady || isJoined" @handleClick="linkToJoinProductPage" />
        </div>
      </div>
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";

import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import ComBtn from "./components/commonBtn";
import {
  getPraxisProjectItem,
  getStudentInfoByMobile,
  getCheckStatus,
  getResultInfoByProjectId
} from "../../request/api";
import moment from 'moment'
export default {
  // 组件名称
  name: "productDetail",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, ComBtn, vueVideoPlayer },
  // 组件状态值
  data() {
    return {
      // 参赛类型;1:个人;2:团队;3:个人或团队; 注意 这里的1、2、3只在报名时有区分类型，在其他地方只有1=团队 2=个人
      entryTypeStr: {
        1: "个人",
        2: "团队",
        3: "个人或团队",
      },
      tipsList: {
        1004053023: "该手机号未注册",
        // 1004053024: "该队员未身份认证，请先认证",
        1004053024: "您未身份认证，请先完成身份认证",
        // 1004053025: "该队员已个人/团队报名，无法再次参加",
        1004053025: "您已个人/团队报名，无法再次参加",
      },
      id: "",
      studentInfo: {},
      info: {
        id: "",
        title: "",
        projectTypeId: "",
        holdUnitUrl: "",
        holdUnitName: null,
        projectDescription: "",
        entryType: "",
        itemPeopleNum: "",
        entryInformation: "",
        competitionRules: "",
        reviewRules: "",
        reviewRequire: "",
        entryRequire: "",
        projectRewards: "",
        videoUrl: "",
        competitionOrganization: "",
        annexDownType: "",
        status: "",
        weight: "",
        releaseTime: null,
        examineFlag: "",
        examineStatus: "",
        examineNotes: "",
        submitTime: "",
        examinePeople: null,
        examineTime: "",
        scheduleType: "",
        projectTypeName: null,
        annexVOList: [],
        scheduleVOList: [],
      },
      code: "",
      isJoined: false,
      resultInfo: null,// 项目公示数据
      isInNextStep: false, // 遴选入选
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.id = id;
      this.init();
    } else {
      this.$message.warning("数据不存在，请稍后重试");
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
    }
    this.isUserHasJoined()
    this.isUserGetInNextStep()
  },
  computed: {
    canDown() {
        return this.info.annexDownType !== '' && this.info.annexDownType !== null 
        && ( (this.info.annexDownType === 1 && this.isJoined) 
        || (this.info.annexDownType === 2 && this.isInNextStep))
    },
    isReady () {
        let endTime = moment(this.info.endTime, "YYYY-MM-DD HH:mm:ss")
            let startTime = moment(this.info.startTime, "YYYY-MM-DD HH:mm:ss")
            let currentTime =  moment()
        if (Number(this.info.scheduleType) === 1) {
            if (currentTime.isBefore(endTime) && startTime.isBefore(currentTime)) {
                return true
            } else {
                return false
            }
        } else {
            return false
        }
    },
    statusStr () {
        let endTime = moment(this.info.endTime, "YYYY-MM-DD HH:mm:ss")
            let startTime = moment(this.info.startTime, "YYYY-MM-DD HH:mm:ss")
            let currentTime =  moment()
        if (!this.info.scheduleType && currentTime.isBefore(startTime)) {
            return '未开始'
        } else if (Number(this.info.scheduleType) === 1) {
            if(Number(this.info.entryFlag) === 1){
                // entryFlag 1:已报名; 其他为未报名
                return '已报名'
            } else if (currentTime.isBefore(endTime) && startTime.isBefore(currentTime)) {
                return '可报名'
            } else {
                return '已结束'
            }
        } else  {
            return '已结束'
        }
    }
  },
  // 组件方法
  methods: {
    openDownLoad(item) {
        if (this.canDown) {
            window.open(item.annexUrl, "_blank");
        }
    },
    // 是否已报名
    isUserHasJoined(){
        let userMobile = localStorage.getItem("userMobile");
      getStudentInfoByMobile({ projectId: this.id, mobile: userMobile }).then(
        (res) => {
          let code  = res.code || res.data.code;
          console.log('123',res)
          if (code ) {
            this.isJoined = Number(code) === 1004053025 ? true: false
          } else {
            this.isJoined = false
          }
        }
      );
    },
    // 是否已入选遴选阶段
    isUserGetInNextStep() {
        getCheckStatus({projectId: this.id}).then(res => {
            if(res && res.code === 0) {
                console.log('是否入选>>>', res)
                this.isInNextStep = res.data === 1
            }
        })
    }, 
    linkToJoinProductPage() {
      if (!this.isReady || this.isJoined) return
      let userMobile = localStorage.getItem("userMobile");
      getStudentInfoByMobile({ projectId: this.id, mobile: userMobile }).then(
        (res) => {
          let { code } = res.data;
          if (
            code &&
            [1004053023, 1004053024, 1004053025].indexOf(Number(code)) > -1
          ) {
            // 状态异常，无法报名
            this.code = code;
            this.$message.warning(this.tipsList[code]);
            this.$store.dispatch('FETCH_USER_INFO')
          } else {
            // 未报名
            this.studentInfo = res.data;
            this.$router.push({ name: "productJoin", query: { id: this.id } });
          }
        }
      );
    },
    init() {
      let params = {
        id: this.id,
      };
      getPraxisProjectItem(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.info = res.data;
          this.info.annexDownTypeStr = ''
          if (this.info.showFlag === 0 || this.info.status !== 1) {
            this.$router.replace({name: 'productList'})
            this.$message.warning('项目暂时无法查看，请联系平台管理员～')
          }
          if (this.info.annexDownType === 1) {
            this.info.annexDownTypeStr = '报名成功方可下载'
          } else if (this.info.annexDownType === 2) {
            this.info.annexDownTypeStr = '入选成功后方可下载'
          }
        }
      });
      getResultInfoByProjectId({projectId:this.id}).then(res=> {
        if(res&& res.code ===0) {
            this.resultInfo = res.data
        }
      })
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;
  .bottom-line {
    border-bottom: 1px solid #eaeaea;
  }
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .search {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 30px;
      position: relative;
      .search-icon {
        width: 18px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 10px;
      }
      .search-select {
        width: 160px;
        margin-right: 13px;
      }
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
      min-height: 500px;
    }
    .base-info {
      position: relative;
      padding: 40px 0 40px;
      .title {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 21px;
      }
      .description {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 31px;
        margin-bottom: 20px;
      }
      .other-info {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 22px;
        .label {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 60px;
          margin-right: 39px;
        }
        .hold-unit-url {
          max-height: 44px;
          margin-right: 110px;
        }
        .right {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 60px;
          margin-right: 110px;
        }
      }
      .hight-light {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 25px;
        margin: 29px 0 0;
        span {
            cursor: pointer;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3D6CB0;
            line-height: 25px;
            margin-left: 19px;
        }
      }
    }
    .product-row-info {
      padding: 25px 0;
      .row {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        margin-bottom: 20px;
        .left {
          width: 139px;
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 40px;
        }
        .right {
          flex: 1;
          overflow: hidden;
          width: 139px;
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          .time-row {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 40px;
          }
          .video-box {
            position: relative;
            width: 453px;
            height: 262px;
          }
          .tips-text {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 40px;
            margin-bottom: 15px;
          }
          .table-view {
            width: 400px;
            background: #ffffff;
            border-top: 1px solid #d4d6da;
            border-left: 1px solid #d4d6da;
            .text-col {
              border-right: 1px solid #d4d6da;
              border-bottom: 1px solid #d4d6da;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
              line-height: 40px;
              text-align: center;
              width: 100%;
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 5px;
            }
            .cursor-pointer {
              cursor: pointer;
            }
            .head {
              background: #f6f7f8;
            }
            .href-link {
              cursor: pointer;
              color: #3d6cb0;
            }
            .no-download {
                cursor: no-drop;
            }
          }
        }
      }
    }
    .btn-box {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      margin-top: 60px;
    }
    .bottom-page {
      margin-top: 20px;
      text-align: center;
    }
  }
}
// /deep/ .el-pagination.is-background .btn-next,
// /deep/ .el-pagination.is-background .btn-prev,
// /deep/ .el-pagination.is-background .el-pager li {
//   background: #fff !important;
//   border: 1px solid #ebebec;
//   border-radius: 4px;
// }

// /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background-color: #409eff !important;
//   color: #fff;
// }
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-select-dropdown__item {
  font-size: 10px !important;
}
// @media screen and (max-width: 1500px) {
//   .content-page .main {
//     max-width: 1000px !important;
//   }
// }

#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}
#app .el-input--prefix .el-input__inner {
  width: 100% !important;
}
.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border: none;
}
</style>
